<template>
  <div>
   <el-form ref="form" :inline="true" :model="orderQuery" label-width="80px">
      <el-form-item>
        <pickArea :showArea="true" @getSite="setArea2" />
      </el-form-item>
      <el-form-item>
        <el-autocomplete
              v-model="orderQuery.customerName"
              :fetch-suggestions="matchStation"
              placeholder="请输入客户姓名"
              @select="handleSelect"></el-autocomplete>
        <el-button type="primary" @click="handleCurrentChange()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 展开行 -->
    <el-table ref="topicTable" :data="orders" @expand-change="getShow" row-key="id" :expand-row-keys="expands">
      <el-table-column type="expand" >
             <el-steps  direction="vertical" :active="state" > 
                <el-step  title="预约">
                      <template  slot="description">
                       <el-form  label-position="left" inline >
                         <el-form-item label="车牌">
                           <span >{{stepShow.carPlate}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="地址">
                           <span>{{stepShow.province}}{{stepShow.city}}{{stepShow.area}}{{stepShow.address}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="预检时间">
                           <span>{{stepShow.placeTestTime}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="订单号">
                           <span>{{stepShow.id}}</span>
                         </el-form-item>
                       </el-form>
                     </template>
                </el-step>

                <el-step title="预检">
                  <template slot="description">
                       <el-form label-position="left" inline >
                         <el-form-item label="客户姓名">
                           <span>{{stepShow.customerName}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="客户电话">
                           <span>{{stepShow.customerPhone}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="代检司机">
                           <span>{{stepShow.driverName}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="实况照片">
                           <div v-if="stepShow.pickCarImg">
                              <el-image  v-for="(item,index) in  stepShow.pickCarImg" :key="index" :src="item" 
                               style="width:80px;height:80px;" :preview-src-list="stepShow.pickCarImg"></el-image>
                           </div>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="取车签字">
                            <el-image v-if="stepShow.pickCarCustomerSign" :src="stepShow.pickCarCustomerSign" style="width:80px;height:80px;" :preview-src-list="[stepShow.pickCarCustomerSign]"></el-image>
                            <el-image v-if="stepShow.pickCarDriverSign" :src="stepShow.pickCarDriverSign" style="width:80px;height:80px;" :preview-src-list="[stepShow.pickCarDriverSign]"></el-image>
                         </el-form-item>
                       </el-form>
                     </template>
                </el-step>

                <el-step title="送检">
                   <template slot="description">
                       <el-form label-position="left" inline >
                         <el-form-item label="取车时间">
                           <span>{{stepShow.pickCarTime}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline>
                         <el-form-item label="检测结果">
                           <span>{{stepShow.testResult}}</span>
                         </el-form-item>
                       </el-form>
                     </template>
                </el-step>

                <el-step title="还车">
                   <template slot="description">
                       <el-form label-position="left" inline >
                         <el-form-item label="还车时间">
                           <span>{{stepShow.backCarSuccessTime}}</span>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="还车签字">
                           <el-image v-if="stepShow.backCarCustomerSign" :src="stepShow.backCarCustomerSign" style="width:80px;height:80px;" :preview-src-list="[stepShow.backCarCustomerSign]"></el-image>
                           <el-image v-if="stepShow.backCarDriverSign" :src="stepShow.backCarDriverSign" style="width:80px;height:80px;" :preview-src-list="[stepShow.backCarDriverSign]"></el-image>
                         </el-form-item>
                       </el-form>
                     </template>
                </el-step>

                <el-step title="归档">
                   <template slot="description">
                       <el-form label-position="left" inline >
                         <el-form-item label="评价反馈">
                            <el-image v-if="stepShow.receiptImg" :src="stepShow.receiptImg"
                             style="width:80px;height:80px;" :preview-src-list="[stepShow.receiptImg]"></el-image>
                         </el-form-item>
                       </el-form>
                       <el-form label-position="left" inline >
                         <el-form-item label="回执图">
                           <div v-if="stepShow.testReport">
                              <el-image  v-for="(item,index) in  stepShow.testReport" :key="index" :src="item" 
                              style="width:80px;height:80px;" :preview-src-list="stepShow.testReport"></el-image>
                           </div>
                         </el-form-item>
                       </el-form>
                     </template>
                </el-step>
            </el-steps>
      </el-table-column>
      <el-table-column prop="id"
                       label="订单Id"></el-table-column>
      <el-table-column prop="customerName"
                       label="客户名称"></el-table-column>
      <el-table-column prop="phone"
                       label="客户电话"></el-table-column>
      <el-table-column prop="address"
                       label="地址">
        <template v-slot="scope">
          {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}{{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column prop="price"
                       label="订单价格"></el-table-column>
      <el-table-column prop="createDate"
                       label="下单时间"></el-table-column>
      <el-table-column prop="placeTestTime"
                       label="预检时间"></el-table-column>
      <el-table-column prop="orderState" label="订单状态">
        <template v-slot="scope">
          <el-tag
            type="danger"
            v-if="scope.row.orderState == '待开始'"
            effect="dark">待开始</el-tag>
          <el-tag
            type="warning"
            v-else-if="scope.row.orderState == '正在进行'"
            effect="dark">正在进行</el-tag>
          <el-tag
            type="success"
            v-else-if="scope.row.orderState == '订单完成'"
            effect="dark">订单完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="declareName"
                       label="客服"></el-table-column>
      <el-table-column prop="remarks"
                       label="备注"></el-table-column>
      <el-table-column prop
                       label="操作">
      <template v-slot="scope">
          <el-button size="mini"
                    type="primary"
                    @click="showDetails(scope.row)">详情</el-button>
      </template>
      </el-table-column>
    </el-table>

    <!------修改订单详情------->
    <el-dialog title="订单详情"
               :visible.sync="dialogFormVisible"
               center>
      <el-descriptions :border="true">
          <el-descriptions-item label="订单id">{{orderDetails.id}}</el-descriptions-item>
          <el-descriptions-item label="车牌号">
              <el-input v-model="orderDetails.carPlate"></el-input>
          </el-descriptions-item>
      <el-descriptions-item label="预检时间">
          <el-date-picker type="datetime"
                      placeholder="选择日期"
                      v-model="orderDetails.placeTestTime"></el-date-picker>
          </el-descriptions-item> 
      <el-descriptions-item label="订单来源">
          <el-select v-model="orderDetails.paymentWay"
                     placeholder="请选择订单来源">
              <el-option value="淘宝"></el-option>
              <el-option value="天猫"></el-option>
              <el-option value="支付宝"></el-option>
              <el-option value="微信小程序"></el-option>
              <el-option value="中保车服"></el-option>
              <el-option value="大蜂保代"></el-option>
              <el-option value="93应用"></el-option>
              <el-option value="路灵灵App"></el-option>
          </el-select>
      </el-descriptions-item>
        <el-descriptions-item label="客户姓名">
            <el-input v-model="orderDetails.customerName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="客户电话">
            <el-input v-model="orderDetails.phone" maxlength="11">
        </el-input></el-descriptions-item>
        <el-descriptions-item label="下单时间">{{orderDetails.createDate}}</el-descriptions-item>
        <el-descriptions-item label="订单金额"> 
            <el-input v-model="orderDetails.price"></el-input>
        </el-descriptions-item>        
        <el-descriptions-item label="居住地址" prop="address">
            <pickArea :showArea="true" :imCity="orderDetails.city" :imProv="orderDetails.province" :imdistrict="orderDetails.area" @getSite="setArea" /> 
            <el-input v-model="orderDetails.address"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="行驶证或车辆照片">
            <el-image v-for="(src,index) in orderDetails.licenseImgs"
                    :key="index"
                    :src="src"
                    style="width:100px;"
                    fit="scale-down"
                    lazy
                    :preview-src-list="orderDetails.licenseImgs"
                    ></el-image>
            <el-upload class="avatar-uploader"
            :action="this.$http.defaults.baseURL+'/file/uploadFile'"
            :show-file-list="false"
            :on-success="updateLicenseImgs">
            <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="电子保单(非必填)">
            <el-image v-for="(src,index) in orderDetails.policyImgs"
                    :key="index"
                    :src="src"
                    style="width:100px;"
                    fit="scale-down"
                    lazy
                    :preview-src-list="orderDetails.policyImgs"
                    ></el-image>
            <el-upload class="avatar-uploader"
              :action="this.$http.defaults.baseURL+'/file/uploadFile'"
              :show-file-list="false"
              :on-success="updatePolicyImgs">
              <img v-if="imageUrl2"
                   :src="imageUrl2"
                   class="avatar">
              <i v-else
                 class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
            <el-input v-model="orderDetails.remarks"></el-input>
        </el-descriptions-item>
      </el-descriptions>
            <div align="center">
            <el-button type="primary" size="mini" 
                   @click="updateOrder(orderDetails)">修改</el-button></div>
    </el-dialog>

    <el-pagination background
                   layout="prev,pager, next, jumper"
                   :total="total"
                   @current-change="handleCurrentPage"
                   @size-change="handleSizeChange"
                   :current-page="currentPage"
                   :page-size="10"></el-pagination>
  </div>
</template>
<script>
import pickArea from '@/components/pickArea.vue'
export default {
  inject: ['reload'],
   components: {
    pickArea,
  },
  data: function () {
    let currentUser = this.$store.state.LoginModule.currentUser
    return {
      currentUser,
      orders: [],
      total: 0,
      dialogFormVisible: false,
      carPlate: '',
      address: '',
      licenseImgs:[],
      policyImgs:[],
      expands: [],
      stepShow: {},
      state:0,
      imageUrl:"",
      imageUrl2:"",
      orderDetails:{},
      newObj: {},
      currentPage: 1,
      orderQuery: {
        pageNum: 1,
        pageSize: 10,
        province:'省份',
        city:'城市',
        area:'区域'
      },
      tempCustomer: null,
    }
  },
  async created() {
    this.handleCurrentChange(1)
  },
  methods: {
    handleCurrentChange: async function (val) {
        const { data: orders } = await this.$http.post(
          `/order/getCStoreOrder`,
          {pageNum:val,pageSize:10,userName:this.currentUser.username,
          carPlate:this.orderQuery.carPlate,id:this.orderQuery.id,
          address:this.orderQuery.address,
          customerName:this.orderQuery.customerName?this.orderQuery.customerName:"",
          area:this.orderQuery.area!=="区域"?this.orderQuery.area:"",
          city:this.orderQuery.city!=="城市"?this.orderQuery.city:"",
          province:this.orderQuery.province!=="省份"?this.orderQuery.province:""}
        )
        if (orders.code == 1) {
          this.orders = orders.object.list
          this.total = orders.object.total
          this.tempCustomer = this.tempCustomer ? this.tempCustomer : this.orders;

          this.orders.forEach(item=>{
            item.licenseImgs = JSON.parse(item.licenseImgs)
            item.policyImgs = JSON.parse(item.policyImgs)
          })
        } else {
          this.$message({
            message: orders.message,
            type: 'error',
          })
        }
    },
    // ------- 车辆详情弹窗开始 ----------
    showDetails: async function (obj) {
      setTimeout(()=>{
         this.orderDetails = obj
      })
      this.dialogFormVisible = true
    },
    // ------- 车辆详情弹窗结束 ----------

    // ------提交修改按钮-------
    updateOrder: async function (obj) {
      this.orderDetails = obj 
      this.orderDetails.placeTestTime = new Date(obj.placeTestTime);
      const { data } = await this.$http.post(`/order/updateCStoreOrder`, this.orderDetails)
      if (data.code == 1) {
        this.$message.success('修改成功')
        this.dialogFormVisible = false
      } else {
        this.$message({
          message: data.message,
          type: 'error',
        })
      } 
    
      this.reload();
    },
    //------ 查询--------
    matchStation: async function (customerName, cb) {
      let customers = [];
      this.tempCustomer.forEach((customer) => {
        customers.push({
          id:customer.id,
          value: customer.customerName,
        });
      });
      cb(customers);
    },
    //展示行内容
    getShow:async function(row, expandedRows){
      if (expandedRows.length) { 
        this.expands = [row.id]
        this.show = row 
        const {data} = await this.$http.get(`/order/getOrderDetail?id=${this.show.id}`);
        this.stepShow = data.object
        this.stepShow.testReport=(this.stepShow.testReport!==null&&this.stepShow.testReport.length>0)?JSON.parse(this.stepShow.testReport):[]
        this.stepShow.pickCarImg=(this.stepShow.pickCarImg.includes('http')&&this.stepShow.pickCarImg.length>0)?JSON.parse(this.stepShow.pickCarImg):[]

      switch(this.stepShow.serviceState){
        case '预约':
          this.state=1
        break;
        case '预检':
          this.state=2
        break;
        case '送检':
          this.state=3
        break;
        case '还车':
          this.state=4
        break;
        case '归档':
          this.state=5
        break;
        default:
          this.state=0
      }
      this.orders=this.orders.slice(0)
      } else { 
        this.expands = []
      }
    },
    handleSelect(item) {
      this.orderQuery.customerName = item.value;
    },
    handleCurrentPage(val) {
      this.currentPage = val;
      this.handleCurrentChange(val);
    },
    handleSizeChange(val) {
      this.orderQuery.pageNum = val;
      this.orderQuery.pageSize = val;
      this.handleCurrentChange(1);
    },
    setArea: function (province, city, area) {
      this.orderDetails.province = province
      this.orderDetails.city = city
      this.orderDetails.area = area
    },
    updateLicenseImgs: function (res, file, fileList) {
      this.orderDetails.licenseImgs.push(res.object.url)
    },
    updatePolicyImgs: function (res, file, fileList) {
      this.orderDetails.policyImgs.push(res.object.url)
    },
    setArea2: function (province, city, area) {
      this.orderQuery.province = province
      this.orderQuery.city = city
      this.orderQuery.area = area
      this.handleCurrentChange()
    },
  },
}
</script>
<style scoped>
.el-form-item.show-pic .el-image {
  margin: 0 10px;
}
</style>